import React, {useEffect} from 'react';
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
import {Box, Button, Container, Grid, Paper, ThemeProvider, Typography,} from "@mui/material";
import PubSub from 'pubsub-js'
import PlayArrowOutlinedIcon from '@mui/icons-material/PlayArrowOutlined';
import {createTheme} from "@mui/material/styles";
import {useLocation} from "react-router-dom"
import MyTable from "../PlayList/MyTable";
import './AlbumDetail.css'
import {get163AlbumDetail} from "../../utils/request/163request";
import {getKwAlbumDetail} from "../../utils/request/kwrequest";
import {getMgAlbumDetail} from "../../utils/request/migurequest";
import {getQAlbumDetail} from "../../utils/request/qrequest";


const theme = createTheme({
    palette: {
        myred: {
            main: '#ff0202',
            contrastText: 'white',
            light: '#ff0202'
        },
    },
});
export default function AlbumDetail(props){

    const [info,setInfo] = React.useState([]);
    // let {state:{id,from,auth,name,imgUrl}} = useLocation();
    let {state:{id,from,auth,name,imgUrl}} = useLocation();


    useEffect(() => {
        //let token = PubSub.subscribe('changeListPage',changePage);
        init();

        return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
            //PubSub.unsubscribe(token);
        }
    }, []) // 如果指定的是[], 回调函数只会在第一次render()后执行
    const rows = info

    function changePage (msg,data) {
        id = data.id;
        from = data.from;
        auth = data.auth;
        //init();
    }
    function addAll(){

        PubSub.publish("addAllMusic",{from:from,rows:rows})


    }
    function collectAll(){

        PubSub.publish("collectAllMusic",{from:from,rows:rows})


    }
    function init(){
        if(from === '163'){
            get163AlbumDetail(id,(r) => {
                setInfo(r)
            })
        }else if(from === 'kugou'){

            setInfo([{
                'id':-1,
                'times' : '',
                'name' : '酷狗不支持',
                'singer' : '',
                'album' : ''
            }])

        }
        else if(from === 'kuwo'){

            getKwAlbumDetail(id,(r) => {
                setInfo(r)
            })
        }
        else if(from === 'migu'){

            getMgAlbumDetail(id,(r) => {

                setInfo(r.map((r) => {
                 return{
                     ...r,
                     'album' : name,
                 }
                }))
            })
        }
        else if(from === 'qq'){

            getQAlbumDetail(id,(r) => {

                setInfo(r)
            })
        }
    }
    return (
        <Container maxWidth="xl" sx={{marginTop:1}}>
            <Paper className='page' elevation={3}>
                <Grid container
                      direction="row"
                >
                    <Grid item xs={12}>
                        <Grid container direction="column">
                            <Paper elevation={3}>
                                <Grid container direction="row">
                                    <Grid item xs={3}>
                                        <img src={imgUrl} width='300px' height='300px'/>
                                    </Grid>
                                    <Grid item xs={9}>
                                        <div className='AlbumTextContent'>
                                            <Typography sx={{marginTop:1}} variant="h4"  gutterBottom component="div">
                                                {name}
                                            </Typography>
                                            <Grid container direction="row">
                                                <AccountCircleOutlinedIcon/>

                                                <Typography  className='auth' variant="overline" fontSize='15px'  display="block" gutterBottom>
                                                    {auth}
                                                </Typography>
                                            </Grid>
                                            <Box sx={{p:7}}/>
                                            <Grid container padding={1}>
                                                <ThemeProvider theme={theme}>
                                                    <Button className='playAllBtn' variant="contained" color='myred' onClick={addAll}><PlayArrowOutlinedIcon/>播放全部</Button>
                                                    <Button className='collectBtn' variant="outlined" color='myred' onClick={collectAll}>收藏</Button>
                                                </ThemeProvider>
                                            </Grid>
                                        </div>
                                    </Grid>
                                </Grid>
                            </Paper>
                            <Grid container direction="row" marginBottom={8}>
                                <Grid item xs={12}>
                                    <MyTable from={from} rows={info}/>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Paper>

        </Container>
    );


}